<template>
  <div class='menu-setting w100 h100'>
    <div class='module-tree'>
      <div class="btns">
        <el-button type='primary' @click.stop="handleCreate(MODULE_PARENT)" class="function-btn">新增父模块</el-button>
        <el-button type='primary' @click.stop="handleCreate(MODULE_CHILD)" class="function-btn">新增子模块</el-button>
        <el-button type='primary' @click.stop='handleCreate(BUTTON)' class="function-btn">新增按钮</el-button>
        <div style="margin: 10px 0 0 0;"></div>
        <el-button type='primary' @click.stop='handleEdit' class="function-btn">编辑</el-button>
        <el-button type='primary' @click.stop='handleDelete' class="function-btn">删除</el-button>
      </div>
      <vue-scroll style="height: calc(100% - 76px); padding-bottom: 15px; box-sizing: border-box">
        <div class='common-title'><span></span>平台模块树</div>
        <el-tree class='_tree'
                 default-expand-all
                 highlight-current
                 :expand-on-click-node='false'
                 :data='platformTree' :props='defaultProps'
                 draggable
                 :allow-drop="allowDrop" @node-click='handleClick'>
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span><i class="el-icon-tickets" v-if="data.type !== 2" style="margin-right: 5px"></i>{{ node.label }}</span>
          </span>
        </el-tree>
        <div class='common-title' style="margin-top: 20px"><span></span>app模块树</div>
        <el-tree class='_tree'
                 default-expand-all
                 highlight-current
                 :expand-on-click-node='false'
                 :data='appTree' :props='defaultProps'
                 draggable
                 :allow-drop="allowDrop" @node-click='handleClick'>
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span><i class="el-icon-tickets" v-if="data.type !== 2" style="margin-right: 5px"></i>{{ node.label }}</span>
          </span>
        </el-tree>
      </vue-scroll>
    </div>
    <div class='module-info'>
      <vue-scroll>
        <div class='common-title'><span></span>{{title}}</div>
        <create-module :title="title" :form="moduleForm" v-if="!isView && dialogVisible && !isCreateButton" @hide="hideDialog"></create-module>
        <create-button :title="title" :form="moduleForm" v-if="!isView && dialogVisible && isCreateButton" @hide="hideDialog"></create-button>
        <view-module :form="moduleForm" v-if="isView && dialogVisible && !isCreateButton"></view-module>
        <view-button :form="moduleForm" v-if="isView && dialogVisible && isCreateButton"></view-button>
      </vue-scroll>
    </div>
    <!--删除弹出框-->
    <delete-dialog :is-show="deleteDialogShow" @close="handleClose"></delete-dialog>
  </div>
</template>

<script>
  import CreateModule from './createModule.vue'
  import CreateButton from './createButton'
  import ViewModule from './viewModule.vue'
  import ViewButton from './viewButton'
  import DeleteDialog from '../../../../components/CommonDialog'
  import Config from '../../../../config'
  export default {
    name: 'module',
    components: {
      CreateModule,
      CreateButton,
      ViewModule,
      ViewButton,
      DeleteDialog
    },
    data () {
      return {
        appTree: [],
        platformTree: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        currentNode: null,
        MODULE_PARENT: 1, // 父模块
        MODULE_CHILD: 0, // 字模块
        BUTTON: 2,
        moduleForm: {
          id: 'iemp20181218140318000036',
          name: '系统设置',
          code: 'user_manager',
          url: '/user_manager',
          picUrl: null,
          type: 1,
          sort: 1,
          des: '系统设置',
          pid: null
        },
        // 删除弹出框
        deleteDialogShow: false,
        // 创建修改弹出框
        dialogVisible: false,
        isCreateButton: false, // 是否创建button
        // 是否预览
        isView: false,
        title: '基本信息',
        MODULE_INSERT: '模块新增',
        MODULE_EDIT: '模块编辑',
        MODULE_VIEW: '模块预览',
        BUTTON_INSERT: '按钮新增',
        BUTTON_EDIT: '按钮编辑',
      }
    },
    mounted () {
      this.getAllModule()
    },
    methods: {
      /**
       * 获取所有的模块
       * */
      getAllModule () {
        const url = `${Config.AUTH_URL}/menu/getAll`
        this.$http.get(url)
          .then(data => {
            this.appTree.splice(0)
            this.platformTree.splice(0)
            this.appTree = data.app
            this.platformTree = data.plate
          })
      },
      /**
       * 新增
       * */
      handleCreate (type) {
        switch (type) {
          case this.BUTTON:
            this.createButton()
            break
          case this.MODULE_CHILD:
          case this.MODULE_PARENT:
            this.createModule(type)
        }
      },
      /**
       * 新增模块
       * */
      createModule (type) {
        if (!this.currentNode && type === this.MODULE_CHILD) { // 子模块
          this.$message.warning('请选择一个节点进行操作')
          return
        }
        if (type === this.MODULE_PARENT) { // 父模块
          this.currentNode = null
        }
        this.title = this.MODULE_INSERT
        this.isCreateButton = false
        this.dialogVisible = true
        this.isView = false
        this.moduleForm = null
        this.moduleForm = {
          sort: 1,
          name: '',
          code: '',
          url: '',
          picUrl: '',
          type,
          des: '',
          pid: this.currentNode ? this.currentNode.id : null
        }
      },
      /**
       * 新增按钮
       * */
      createButton () {
        // if (!this.currentNode || !this.isChildModule()) { // 按钮
        if (!this.currentNode) { // 按钮
          this.$message.warning('请选择一个子模块进行操作')
          return
        }
        this.title = this.BUTTON_INSERT
        this.isCreateButton = true
        this.dialogVisible = true
        this.isView = false
        this.moduleForm = null
        this.moduleForm = {
          name: '',
          code: '',
          des: '',
          menuId: this.currentNode ? this.currentNode.id : '',
          systemId: '7',
          tenantId: '0',
          type: 2
        }
      },
      /**
       * 是否为字模块
       * */
      isChildModule () {
        const node = this.currentNode
        return !!node.pid && node.type === this.MODULE_CHILD
      },
      /**
       * 编辑
       * */
      handleEdit () {
        const node = this.currentNode
        if (!node) {
          this.$message.warning('请选择一个节点进行操作')
          return
        }
        if (node.type === this.BUTTON) {
          this.isCreateButton = true
          this.title = this.BUTTON_EDIT
        } else {
          this.isCreateButton = false
          this.title = this.MODULE_EDIT
        }
        this.isView = false
        this.dialogVisible = true
        this.moduleForm = null
        this.moduleForm = JSON.parse(JSON.stringify(node))
        console.log('this.moduleForm ', this.moduleForm)
      },
      /**
       * 选择节点
       * */
      handleClick (obj, node, tree) {
        this.currentNode = JSON.parse(JSON.stringify(obj))
        console.log(obj)
        this.handleView()
      },
      /**
       * 拖拽时判定目标节点能否被放置
       * */
      allowDrop (draggingNode, dropNode, type) {
        // 拖动模块
        if (draggingNode.data.type === this.MODULE_PARENT) {
          if (dropNode.data.type === this.MODULE_CHILD) { // 终点是按钮
            return false
          }
          if (dropNode.data.type === this.MODULE_PARENT) { // 终点是模块
            if (type === 'inner') { // 是内部
              return false
            }
          }
        } else {
          // 拖动按钮
          if (dropNode.data.type === this.MODULE_PARENT) { // 终点是模块
            if (draggingNode.data.id !== dropNode.data.pid) { // 不是父级
              return false
            }
            if (type !== 'inner') { // 不是内部
              return false
            }
          }
          if (dropNode.data.type === this.MODULE_CHILD) { // 终点是按钮
            if (draggingNode.data.pid !== dropNode.data.pid) { // 不是同级按钮
              return false
            }
            if (type === 'inner') { // 同级按钮内部
              return false
            }
          }
        }
        return true
      },
      /**
       * 预览
       * */
      handleView () {
        const node = this.currentNode
        if (!node) {
          this.$message.warning('请选择一个节点进行操作')
          return
        }
        if (node.type === this.BUTTON) {
          this.isCreateButton = true
        } else {
          this.isCreateButton = false
        }
        this.title = this.MODULE_VIEW
        this.isView = true
        this.dialogVisible = true
        this.moduleForm = null
        this.moduleForm = JSON.parse(JSON.stringify(node))
      },
      /**
       * 删除
       * */
      handleDelete () {
        const node = this.currentNode
        if (!node) {
          this.$message.warning('请选择一个节点进行操作')
          return
        }
        let message = ``
        if (node.type === this.MODULE_PARENT && node.children.length !== 0) {
          message += `当前节点包含子模块`
        }
        this.deleteDialogShow = true
      },
      handleClose (id) {
        this.deleteDialogShow = false
        if (!id) {
          this.currentNode = null
          return
        }
        this.deleteFromServer(this.currentNode)
      },
      /**
       * 从数据库中删除
       * */
      deleteFromServer (node) {
        return new Promise((resolve, reject) => {
          let url = `${Config.AUTH_URL}`
          if (node.type === this.BUTTON) {
            url += `/button/delete?id=${node.id}`
          } else {
            url += `/menu/delete?id=${node.id}`
          }
          this.$http.post(url)
            .then(data => {
              this.$message.success('删除成功')
              this.dialogVisible = false
              this.getAllModule()
            })
            .catch(e => {
              this.$message.success('删除失败')
              reject(e)
            })
        })
      },
      hideDialog (success) {
        if (success === 'cancel') {
          this.dialogVisible = false
          this.title = '基本信息'
          return
        }
        if (success) {
          this.$message.success('保存成功')
          this.title = '基本信息'
          this.getAllModule()
          this.dialogVisible = false
          this.currentNode = null
          return
        }
        this.$message.success('保存失败')
      }
    }
  }
</script>

<style lang='scss' scoped>
  @import "../../../../../static/scss/common";
  .menu-setting {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    .module-tree {
      font-size: 14px;
      width: 430px;
      margin-right: 20px;
      background-color: #fff;
      border: 1px solid #E4E4E4;
      box-sizing: border-box;
      padding: 10px 0 20px 20px;
      .btns {
        margin: 15px 0 10px 0;
      }
      ._tree {
        margin: 20px 0 0 20px;
      }
    }
    .common-title {
      font-size: 16px;
      font-weight: bold;
      color: #444;
    }
    .module-info {
      flex: 1;
      background-color: #fff;
      border: 1px solid #E4E4E4;
      box-sizing: border-box;
      padding: 30px 0 30px 30px;
    }
  }
</style>
